<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十字通讯社 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Firebase SDK -->
    <script type="module">
        // 导入需要的Firebase模块
        import { initializeApp } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-firestore.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-analytics.js";

        // Firebase配置
        const firebaseConfig = {
            apiKey: "AIzaSyDstICwWgLYdehjTOHDQgqLo2PixCtAo0I",
            authDomain: "website-568e5.firebaseapp.com",
            projectId: "website-568e5",
            storageBucket: "website-568e5.firebasestorage.app",
            messagingSenderId: "550643967633",
            appId: "1:550643967633:web:c042e7d41d4070fabc0130",
            measurementId: "G-4DR9JHFPN8"
        };

        // 初始化Firebase应用
        const app = initializeApp(firebaseConfig);
        
        // 初始化服务
        const db = getFirestore(app);
        const analytics = getAnalytics(app);
        
        // 暴露到全局，供其他脚本使用
        window.db = db;
    </script>
    <script>
        // Tailwind配置
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'burgundy': '#800020',
                        'burgundy-light': '#a52a2a',
                        'burgundy-dark': '#4b000f',
                        'cream': '#fffdd0',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            }
            .hero-gradient {
                background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
            }
            .card-hover {
                transition: transform 0.3s, box-shadow 0.3s;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .nav-scrolled {
                background-color: rgba(128, 0, 32, 0.95);
                backdrop-filter: blur(5px);
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 overflow-x-hidden">
    <!-- 导航栏 -->
    <nav id="main-nav" class="fixed w-full z-50 transition-all duration-300 py-4">
        <div class="container mx-auto px-4 md:px-8">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
                        <span class="text-burgundy font-bold text-xl">十</span>
                    </div>
                    <span class="text-2xl font-bold text-white text-shadow">十字通讯社</span>
                </a>
                
                <!-- 桌面导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-white hover:text-gray-200 font-medium transition-colors duration-300 border-b-2 border-white">首页</a>
                    <a href="jobs.html" class="text-white hover:text-gray-200 font-medium transition-colors duration-300">招聘岗位</a>
                    <a href="about.html" class="text-white hover:text-gray-200 font-medium transition-colors duration-300">关于我们</a>
                    <a href="admin.html" class="bg-white text-burgundy px-4 py-2 rounded-md hover:bg-gray-100 transition-colors duration-300 font-medium">管理后台</a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-white text-2xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="index.html" class="text-burgundy hover:text-burgundy-dark py-2 border-b border-gray-100">首页</a>
                <a href="jobs.html" class="text-burgundy hover:text-burgundy-dark py-2 border-b border-gray-100">招聘岗位</a>
                <a href="about.html" class="text-burgundy hover:text-burgundy-dark py-2 border-b border-gray-100">关于我们</a>
                <a href="admin.html" class="bg-burgundy text-white px-4 py-2 rounded-md text-center">管理后台</a>
            </div>
        </div>
    </nav>

    <!-- 头条区域 -->
    <header class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="https://picsum.photos/id/1015/1920/1080" alt="头条新闻背景" class="w-full h-full object-cover">
            <div class="absolute inset-0 hero-gradient"></div>
        </div>
        
        <div class="container mx-auto px-4 z-10 text-center">
            <div class="max-w-4xl mx-auto">
                <span class="inline-block px-3 py-1 bg-burgundy text-white text-sm font-medium rounded-full mb-6 animate-fade-in">头条新闻</span>
                <h1 id="headline-title" class="text-[clamp(2rem,8vw,4.5rem)] font-bold text-white text-shadow mb-6 leading-tight animate-slide-up">
                    全球气候变化峰会达成历史性协议
                </h1>
                <p id="headline-summary" class="text-[clamp(1rem,3vw,1.25rem)] text-gray-100 mb-8 max-w-2xl mx-auto animate-slide-up" style="animation-delay: 0.2s">
                    来自195个国家的领导人签署了具有里程碑意义的协议，承诺在未来十年内大幅减少碳排放
                </p>
                <a href="#" class="inline-block bg-white text-burgundy px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition-colors duration-300 animate-slide-up" style="animation-delay: 0.4s">
                    阅读全文 <i class="fa fa-angle-right ml-2"></i>
                </a>
            </div>
        </div>
        
        <div class="absolute bottom-8 left-0 right-0 text-center z-10">
            <a href="#latest-news" class="text-white animate-bounce inline-block">
                <i class="fa fa-angle-down text-3xl"></i>
            </a>
        </div>
    </header>

    <!-- 最新新闻 -->
    <section id="latest-news" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-end mb-12">
                <div>
                    <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-gray-900 mb-4">最新新闻</h2>
                    <div class="w-20 h-1 bg-burgundy"></div>
                </div>
                <a href="#" class="hidden md:flex items-center text-burgundy font-medium hover:text-burgundy-dark transition-colors duration-300">
                    查看全部新闻 <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
            </div>
            
            <div id="news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 新闻内容将通过JavaScript动态加载 -->
                <div class="col-span-full text-center py-16">
                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-burgundy mx-auto mb-4"></div>
                    <p class="text-gray-500">加载新闻中...</p>
                </div>
            </div>
            
            <div class="mt-10 text-center md:hidden">
                <a href="#" class="inline-flex items-center text-burgundy font-medium hover:text-burgundy-dark transition-colors duration-300">
                    查看全部新闻 <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 新闻分类 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-gray-900 mb-4">新闻分类</h2>
                <div class="w-20 h-1 bg-burgundy mx-auto mb-8"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">浏览不同类别的新闻报道，获取全面的信息</p>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
                <a href="#" class="category-card group relative h-48 md:h-64 rounded-lg overflow-hidden">
                    <img src="https://picsum.photos/id/1071/600/800" alt="政治新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 md:p-6 w-full">
                        <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mb-3">
                            <i class="fa fa-university text-white"></i>
                        </div>
                        <h3 class="text-white font-bold text-lg md:text-xl">政治</h3>
                        <p class="text-white/80 text-sm mt-1">128 篇报道</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative h-48 md:h-64 rounded-lg overflow-hidden">
                    <img src="https://picsum.photos/id/180/600/800" alt="经济新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 md:p-6 w-full">
                        <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mb-3">
                            <i class="fa fa-line-chart text-white"></i>
                        </div>
                        <h3 class="text-white font-bold text-lg md:text-xl">经济</h3>
                        <p class="text-white/80 text-sm mt-1">95 篇报道</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative h-48 md:h-64 rounded-lg overflow-hidden">
                    <img src="https://picsum.photos/id/1059/600/800" alt="科技新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 md:p-6 w-full">
                        <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mb-3">
                            <i class="fa fa-microchip text-white"></i>
                        </div>
                        <h3 class="text-white font-bold text-lg md:text-xl">科技</h3>
                        <p class="text-white/80 text-sm mt-1">156 篇报道</p>
                    </div>
                </a>
                
                <a href="#" class="category-card group relative h-48 md:h-64 rounded-lg overflow-hidden">
                    <img src="https://picsum.photos/id/431/600/800" alt="文化新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-4 md:p-6 w-full">
                        <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mb-3">
                            <i class="fa fa-paint-brush text-white"></i>
                        </div>
                        <h3 class="text-white font-bold text-lg md:text-xl">文化</h3>
                        <p class="text-white/80 text-sm mt-1">78 篇报道</p>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- 订阅区域 -->
    <section class="py-16 bg-burgundy text-white">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold mb-4">订阅新闻推送</h2>
                <p class="text-white/80 mb-8 max-w-2xl mx-auto">第一时间获取重要新闻推送，不错过任何重大事件</p>
                
                <form id="subscription-form" class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
                    <input type="email" placeholder="请输入您的邮箱地址" class="flex-1 px-4 py-3 rounded-md focus:outline-none text-gray-800">
                    <button type="submit" class="bg-white text-burgundy px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition-colors duration-300 whitespace-nowrap">
                        立即订阅
                    </button>
                </form>
                
                <p class="text-white/60 text-sm mt-4">我们尊重您的隐私，不会向第三方分享您的信息</p>
            </div>
        </div>
    </section>

    <!-- 编辑推荐 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-end mb-12">
                <div>
                    <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-gray-900 mb-4">编辑推荐</h2>
                    <div class="w-20 h-1 bg-burgundy"></div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="relative rounded-lg overflow-hidden h-96 group card-hover">
                    <img src="https://picsum.photos/id/1016/1200/800" alt="深度报道" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 p-6 md:p-8 w-full">
                        <span class="inline-block px-3 py-1 bg-burgundy text-white text-sm font-medium rounded-full mb-4">深度报道</span>
                        <h3 class="text-white font-bold text-xl md:text-2xl mb-3">全球粮食安全：挑战与解决方案</h3>
                        <p class="text-white/80 mb-4 max-w-lg">探讨全球粮食生产与分配的不平等问题，以及可能的解决方案</p>
                        <div class="flex items-center text-white/90 text-sm">
                            <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full mr-2">
                            <span>李明哲 记者</span>
                            <span class="mx-2">•</span>
                            <span>2023-06-15</span>
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-gray-50 rounded-lg overflow-hidden card-hover">
                        <div class="h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/1035/600/400" alt="科技新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        </div>
                        <div class="p-5">
                            <span class="inline-block px-2 py-1 bg-burgundy/10 text-burgundy text-xs font-medium rounded mb-3">科技</span>
                            <h3 class="font-bold text-lg mb-2">人工智能在医疗领域的突破性应用</h3>
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">AI技术如何帮助医生更准确地诊断疾病，提高治疗效果</p>
                            <div class="flex justify-between items-center text-gray-500 text-sm">
                                <span>2023-06-10</span>
                                <span>5分钟阅读</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg overflow-hidden card-hover">
                        <div class="h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/325/600/400" alt="国际新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        </div>
                        <div class="p-5">
                            <span class="inline-block px-2 py-1 bg-burgundy/10 text-burgundy text-xs font-medium rounded mb-3">国际</span>
                            <h3 class="font-bold text-lg mb-2">全球能源转型：可再生能源的崛起</h3>
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">各国如何加速可再生能源部署，减少对化石燃料的依赖</p>
                            <div class="flex justify-between items-center text-gray-500 text-sm">
                                <span>2023-06-08</span>
                                <span>7分钟阅读</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg overflow-hidden card-hover">
                        <div class="h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/447/600/400" alt="文化新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        </div>
                        <div class="p-5">
                            <span class="inline-block px-2 py-1 bg-burgundy/10 text-burgundy text-xs font-medium rounded mb-3">文化</span>
                            <h3 class="font-bold text-lg mb-2">非遗保护：传统文化的现代传承</h3>
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">传统手工艺如何在现代社会中找到新的生存与发展空间</p>
                            <div class="flex justify-between items-center text-gray-500 text-sm">
                                <span>2023-06-05</span>
                                <span>6分钟阅读</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg overflow-hidden card-hover">
                        <div class="h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/26/600/400" alt="经济新闻" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        </div>
                        <div class="p-5">
                            <span class="inline-block px-2 py-1 bg-burgundy/10 text-burgundy text-xs font-medium rounded mb-3">经济</span>
                            <h3 class="font-bold text-lg mb-2">后疫情时代：全球经济复苏之路</h3>
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">分析全球经济在疫情后的复苏趋势与面临的挑战</p>
                            <div class="flex justify-between items-center text-gray-500 text-sm">
                                <span>2023-06-01</span>
                                <span>8分钟阅读</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-burgundy flex items-center justify-center">
                            <span class="text-white font-bold text-xl">十</span>
                        </div>
                        <span class="text-2xl font-bold">十字通讯社</span>
                    </div>
                    <p class="text-gray-400 mb-6">传递真相，连接世界，我们致力于提供最及时、最准确的新闻报道。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-facebook text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors duration-300">首页</a></li>
                        <li><a href="jobs.html" class="text-gray-400 hover:text-white transition-colors duration-300">招聘岗位</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors duration-300">关于我们</a></li>
                        <li><a href="admin.html" class="text-gray-400 hover:text-white transition-colors duration-300">管理后台</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-burgundy"></i>
                            <span class="text-gray-400">北京市朝阳区新闻大厦A座15层</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-burgundy"></i>
                            <span class="text-gray-400">+86 10 8888 7777</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-burgundy"></i>
                            <span class="text-gray-400">contact@crossnews.com</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">法律信息</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">版权声明</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">免责声明</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
                <p>&copy; 2025 十字通讯社. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.getElementById('main-nav');
            if (window.scrollY > 50) {
                nav.classList.add('nav-scrolled', 'py-2');
                nav.classList.remove('py-4');
            } else {
                nav.classList.remove('nav-scrolled', 'py-2');
                nav.classList.add('py-4');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId !== '#') {
                    document.querySelector(targetId).scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 从Firebase加载新闻
        import { collection, getDocs, orderBy, limit, query } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-firestore.js";
        
        async function loadNews() {
            const newsContainer = document.getElementById('news-container');
            
            try {
                // 从Firebase获取最新新闻
                const newsRef = collection(window.db, "news");
                const q = query(newsRef, orderBy("publishDate", "desc"), limit(6));
                const querySnapshot = await getDocs(q);
                
                if (!querySnapshot.empty) {
                    newsContainer.innerHTML = '';
                    
                    querySnapshot.forEach((doc, index) => {
                        const news = doc.data();
                        const newsCard = document.createElement('div');
                        newsCard.className = 'bg-white rounded-lg overflow-hidden shadow-md card-hover';
                        newsCard.style.animationDelay = `${index * 0.1}s`;
                        newsCard.style.opacity = '0';
                        newsCard.style.animation = 'fadeIn 0.5s ease forwards';
                        
                        // 格式化日期
                        const date = news.publishDate ? new Date(news.publishDate.seconds * 1000) : new Date();
                        const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
                        
                        newsCard.innerHTML = `
                            <div class="h-56 overflow-hidden">
                                <img src="${news.imageUrl || `https://picsum.photos/id/${100 + index}/600/400`}" alt="${news.title}" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                            </div>
                            <div class="p-5">
                                <div class="flex items-center mb-3">
                                    <span class="inline-block px-2 py-1 bg-burgundy/10 text-burgundy text-xs font-medium rounded">${news.category || '综合'}</span>
                                    <span class="text-gray-500 text-xs ml-auto">${formattedDate}</span>
                                </div>
                                <h3 class="font-bold text-lg mb-2 line-clamp-2">${news.title}</h3>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-3">${news.summary || '点击阅读全文了解详细内容'}</p>
                                <a href="#" class="inline-flex items-center text-burgundy font-medium hover:text-burgundy-dark text-sm transition-colors duration-300">
                                    阅读全文 <i class="fa fa-angle-right ml-1"></i>
                                </a>
                            </div>
                        `;
                        
                        newsContainer.appendChild(newsCard);
                    });
                } else {
                    // 加载默认新闻
                    loadDefaultNews(newsContainer);
                }
            } catch (error) {
                console.error("Error loading news:", error);
                loadDefaultNews(newsContainer);
            }
        }
        
        // 加载默认新闻
        function loadDefaultNews(container) {
            container.innerHTML = '';
            const defaultNews = [
                {
                    title: "全球气候变化峰会达成历史性协议",
                    summary: "来自195个国家的领导人签署了具有里程碑意义的协议，承诺在未来十年内大幅减少碳排放",
                    category: "国际",
                    imageUrl: "https://picsum.photos/id/1015/600/400"
                },
                {
                    title: "新型人工智能技术在医疗领域取得突破",
                    summary: "研究人员开发的AI系统能够准确诊断多种疾病，诊断准确率超过人类医生",
                    category: "科技",
                    imageUrl: "https://picsum.photos/id/1025/600/400"
                },
                {
                    title: "国家出台新政策促进数字经济发展",
                    summary: "新政策将为科技企业提供税收优惠和资金支持，推动数字经济与实体经济融合",
                    category: "经济",
                    imageUrl: "https://picsum.photos/id/1043/600/400"
                },
                {
                    title: "大型文化遗产保护项目启动",
                    summary: "为期五年的文化遗产保护项目将修复全国多处重要文物古迹",
                    category: "文化",
                    imageUrl: "https://picsum.photos/id/1053/600/400"
                },
                {
                    title: "国际体育赛事即将在我国举办",
                    summary: "组委会表示各项准备工作已基本就绪，将为全球观众呈现一场精彩赛事",
                    category: "体育",
                    imageUrl: "https://picsum.photos/id/1058/600/400"
                },
                {
                    title: "新研究揭示健康饮食对延长寿命的重要性",
                    summary: "科学家通过长期研究发现，坚持健康饮食习惯可显著降低多种疾病风险",
                    category: "健康",
                    imageUrl: "https://picsum.photos/id/1080/600/400"
                }
            ];
            
            defaultNews.forEach((news, index) => {
                const date = new Date();
                date.setDate(date.getDate() - index);
                const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
                
                const newsCard = document.createElement('div');
                newsCard.className = 'bg-white rounded-lg overflow-hidden shadow-md card-hover';
                newsCard.style.animationDelay = `${index * 0.1}s`;
                newsCard.style.opacity = '0';
                newsCard.style.animation = 'fadeIn 0.5s ease forwards';
                
                newsCard.innerHTML = `
                    <div class="h-56 overflow-hidden">
                        <img src="${news.imageUrl}" alt="${news.title}" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center mb-3">
                            <span class="inline-block px-2 py-1 bg-burgundy/10 text-burgundy text-xs font-medium rounded">${news.category}</span>
                            <span class="text-gray-500 text-xs ml-auto">${formattedDate}</span>
                        </div>
                        <h3 class="font-bold text-lg mb-2 line-clamp-2">${news.title}</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">${news.summary}</p>
                        <a href="#" class="inline-flex items-center text-burgundy font-medium hover:text-burgundy-dark text-sm transition-colors duration-300">
                            阅读全文 <i class="fa fa-angle-right ml-1"></i>
                        </a>
                    </div>
                `;
                
                container.appendChild(newsCard);
            });
        }
        
        // 订阅表单处理
        document.getElementById('subscription-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const emailInput = this.querySelector('input[type="email"]');
            const email = emailInput.value.trim();
            
            if (email && validateEmail(email)) {
                // 这里添加订阅逻辑，实际项目中会将邮箱发送到服务器
                alert('订阅成功！我们将定期向您发送新闻推送。');
                this.reset();
            } else {
                alert('请输入有效的邮箱地址');
            }
        });
        
        // 邮箱验证函数
        function validateEmail(email) {
            const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航栏状态
            window.dispatchEvent(new Event('scroll'));
            
            // 加载新闻
            loadNews();
        });
    </script>
</body>
</html>